﻿<?php
$clientPath = './';
$clientLibPath = '../js/disco-0.2.1a/inc/';
$cssPath = $clientPath . 'css/';
$jsPath = $clientPath . 'js/';
$generalJsPath = '../js/';

$discoUri = isset($_GET['disco']) ? $_GET['disco'] : '//test.disco-network.org/api/odata';
?>

<!doctype html>
<html manifest="manifest.manifest">
	<head>
		<title>qKonsens - d!sco in action</title>
		<link rel="shortcut icon" href="<?php echo $clientPath ?>qkonsens2.ico" />
		<link rel="stylesheet" href="<?php echo $cssPath ?>reset.css" />
		<link rel="stylesheet" href="<?php echo $cssPath ?>style.css" />
	</head>
	<body>
		<div id="wrapper">
			<div id="usermgt">
				<label for="username">Username: </label><input id="username" type="text" data-bind="value: userName" />
			</div>
			<div id="top">
				<h1><span class="logo-q">q</span><span class="logo-consense">Konsens</span> <i>Proof-of-Concept</i></h1>
				<ul id="nav" data-bind="foreach: tabs"><li>
					<a data-bind="text: title, click: $parent.selectedTab.bind(null,$data), attr: { class: $data == $parent.selectedTab() ? 'selected tabitem' : 'tabitem' }"> </a>
				</li></ul>
			</div>
			<input type="checkbox" id="modmode" data-bind="checked: isAdmin" /><label for="modmode">Moderationsmodus</label>
			<div id="main" data-bind="with: selectedTab">
				<div data-bind="template: { name: type + '-tab-template' }"></div>
			</div>
		</div>
		
		<script type="text/html" id="kk-tab-template">
			<div data-bind="template: { name: 'qkelem-template', data: kkView }"></div>
		</script>
		
		<script type="text/html" id="browse-tab-template">
			<!-- ko with: parentTopicView -->
			
				<ul data-bind="foreach: breadcrumb"><!-- ko with: $parent.breadcrumbTopicView($data) -->
					<li class="clickable" data-bind="text: caption, click: click"></li>
				<!-- /ko --></ul>
				
				<h1 data-bind="text: title"></h1>
				<p data-bind="text: text"></p>
				
				<ul data-bind="foreach: children"><!-- ko with: $parent.childTopicView($data) -->
					<li class="clickable" data-bind="text: caption, click: click"></li>
				<!-- /ko --></ul>
				
				<!-- ko if: kks().length -->
					<h2>Konsenskisten zum Thema</h2>
					<ul data-bind="">
						<!-- ko foreach: kks --><!-- ko with: $parent.kkView($data) -->
							<li class="clickable" data-bind="text: caption, click: click"></li>
						<!-- /ko --><!-- /ko -->
						<li data-bind="if: $root.isAdmin">
							<a data-bind="click: newKk.onClick">Neu</a>
							<div data-bind="if: newKk.isVisible">
								<p><input class="block" type="text" placeholder="Titel" data-bind="value: newKk.title" /></p>
								<p><textarea class="block" placeholder="Kurzbeschreibung" data-bind="value: newKk.text"></textarea></p>
								<button data-bind="click: newKk.onSubmit">Los</button>
							</div>
						</li>
					</ul>
				<!-- /ko -->
			<!-- /ko -->
		</script>
		
		<script type="text/html" id="start-tab-template">
			<h1>Disclaimer</h1>
			<p>
			Dies ist nicht der fertige qKonsens! Es handelt sich lediglich um eine sogenannte "Proof-of-Concept"-Version.
			Es geht uns darum, die grundlegende Funktionsweise des qKonsens darzustellen und es ist gut möglich, dass noch einige Komfort-Funktionen fehlen.
			</p>
			<p>Danke für euer Verständnis und eure Geduld!</p>
			<p>
			Außerdem ist es wichtig zu beachten, dass die hier verwendeten Testdaten <b>nicht</b> zur Meinungsbildung gedacht sind,
			sondern lediglich dazu, das Konzept zu veranschaulichen. Daher stellen sie auch nicht die Meinung der Autoren dar.
			</p>
					
			<h1>Von wem stammt dieser Prototyp?</h1>
			<p>
				Von der AG Meinungsfindungstool, die Diskussionen und Diskussionsplattformen im Internet verbessern und optimieren will.
				Obwohl wir offiziell eine Arbeisgemeinschaft der Piratenpartei sind, sind viele AG-Mitglieder vond der Piratenpartei
				unabhängig und damit auch die AG. Wenn du mithelfen willst, dann schau' doch mal <a href="http://wiki.piratenpartei.de/AG_Meinungsfindungstool">hier</a> vorbei!
			</p>
		</script>
		
		<script type="text/html" id="help-tab-template">
		<h1>Einführende Begriffe</h1>
		<p>
			Nachfolgend werden die Grundbegriffe kurz erläutert, die für das Verständnis dieser PoC-Version Voraussetzung sind.
		</p>
		<p>
			Unter "<u>obligat</u>" wird aufgeführt, was zur qKonsens-Basisversion gehört. Nach "<u>optional</u>" wird angedeutet, 
			was darüber hinaus für die qKonsens-Vollversion vorgesehen ist.
		</p>
		<h2 id="konsenskiste">Konsenskiste</h2>
		<p>Sammlung von <a href="#kernaussage">Kernaussagen</a>, die ein abgegrenztes ->Thema (=Kopfzeile) repräsentieren.</p>
		<p>
			Zu jeder Kernaussage erscheint die <a href="#bewertung">Bewertung</a> der Teilnehmer.
			So stellt die Konsenskiste Konsens und Dissens als ganzheitlichen Standpunkt der Teilnehmer zum jeweiligen Thema dar.
		</p>
		<p><u>obligat</u>: Konsenskiste=Station in einem mehrphasigen Willensbildungsprozess.</p> 
		<h2 id="dokumentansicht">Dokumentansicht</h2>
		<p>
			Hier erscheint der jeweils aktuelle Stand des Ergebnis-Dokumentes.
			Grundgedanke ist, dass ein (schon möglichst qualifizierter) Entwurf, angetrieben durch <a href="#bewertung">Bewertung</a> und <a href="#diskussion">Diskussion</a> der Teilnehmer,
			von Moderatoren zu einem politisch wirksamen Dokument ausgeformt wird.
		</p>
		<p><u>optional</u>: Anzeige der <a href="#klaertext">Klärtexte</a>; Ausfiltern aller KA mit geringer Zustimmung; Anzeige der Stimmenzahlen.</p>
		<h2 id="moderatorenmodus">Moderatorenmodus</h2>
		<p>
			Der Moderator  kann (und soll!) verantwortungsbewusst Kernaussagen bearbeiten und Diskussionsbeiträge löschen. 
			Momentan kann sich noch jeder User als Moderator betätigen - bitte davon nur konstruktiv-wohlüberlegt Gebrauch machen!
		</p>
		<h2 id="kernaussage">Kernaussage</h2>
		<p>
			Jede Kernaussage soll so klar formuliert sein, dass jeder Teilnehmer seine Meinung dazu in Bewertung und Diskussion eindeutig ausdrücken kann. 
			Dargestellt wird jede Kernaussage mit Titel, Text und <a href="#funktionsleiste">Funktionsleiste</a>.
		</p>
		<p><u>optional</u>: Verlinkung von KA; Markierung der Kernaussagen nach Wichtigkeit, Warnungen ua.</p>
		<h2 id="funktionsleiste">Funktionsleiste</h2>
		<p>
			Die Funktionsleiste dient nebenbei als optische Trennung der Kernaussagen.
			Hauptzweck ist, dass jegliche Funktionalität für den elementaren Willensbildungsprozess unmittelbar an jeder Kernaussage verfügbar ist.
			In der PoC-Version sind die Funktionalitäten 
			<a href="#klaertext">Klärtext</a>, <a href="#bewertung">Bewertung</a>, <a href="#diskussion">Diskussion</a> verfügbar.
			Die unmittelbare Verbindung von Bewertung und Diskussion ist Grundprinzip des qKonsens!
		</p>
		<p><u>obligat</u>: Autorenkommentar, History, Unter-KoKi</p>
		<h2 id="klaertext">Klärtext </h2>
		<p>
			Knackig formulierte Kernaussagen bergen das Risiko, missverstanden zu werden - weil viele Begriffe mehrdeutig verwendet werden.
			Die Klärtexte(früher "Kontexte") sollen Fehlinterpretationen zu vermeiden helfen - auch im Ergebnisdokument.
		</p>
		<h2 id="bewertung">Bewertung </h2>
		<p>
			Jeder Teilnehmer kann jede Kernaussage bewerten: "++" volle Zustimmung, "+" bedingte Zustimmung, "0" neutral, "-" bedingte Ablehnung, 
			"-- " totale Ablehnung. Das "?" bedeutet "Gelesen, aber (noch) nicht bewertet."
			(es wird noch überlegt, ob der Unterschied zu "0" signifikant ist!)
			Die Zähler der bisher abgegebenen Stimmen werden angezeigt.
		</p>
		<p><u>obligat</u>: Recht auf Abgabe und Anzeige der Zähler wird per User-Mgt geregelt.</p>
		<h2 id="diskussion">Diskussion </h2>
		<p>
			Jeder Teilnehmer kann zu jeder Kernaussage Diskussionsbeiträge posten.
			D.h., mehrere unterschiedliche Ideen sollten in jeweils einem eigenen Diskussionbeitrag gepostet werden.
		</p>
		<p>qKnsens optional: differenzierte Adressierung und Verlinkung der Diskussionsbeiträge.</p>
		</script>
		
		<script type="text/html" id="qkelem-template">
			<div data-bind="attr: { class: type, id: id }">
				<!-- ko if: $root.isAdmin() && (type == 'cmt' || type == 'ka') -->
					<a class="clickable symbol" style="float: right" data-bind="click: remove_onClick">x</a>
				<!-- /ko -->
				<!-- ko if: $root.isAdmin() && (type == 'ka' || type == 'kk') -->
					<a class="clickable symbol" style="float: right">bearbeiten</a>
				<!-- /ko -->
				<!-- ko if: title() && title().length -->
					<h1 class="title" data-bind="text: title"></h1>
				<!-- /ko -->
				<p>
					<span class="text" data-bind="text: text"></span>
				</p>
				<div data-bind="if: (type == 'kk' || type == 'ka') && context() && showContext()">
					<!-- ko template: { name: 'context-template', data: context } --><!-- /ko -->
				</div>
				
				<!-- ko if: type == 'kk' || type == 'ka' || type == 'cmt' -->
					<!-- ko if: type == 'kk' -->
						<!-- ko foreach: (children && children()) || [] -->
							<!-- ko template: { name: 'qkelem-template', data: $parent.kaView($data) } --><!-- /ko -->
						<!-- /ko -->
						<div class="ka" data-bind="if: $root.isAdmin">
							<a class="clickable control" data-bind="click: kaForm.onClick">+ Kernaussage</a>
							<div data-bind="if: kaForm.isVisible">
								<p><input type="text" placeholder="Kernaussagen-Titel" class="block" data-bind="value: kaForm.title"/></p>
								<p><textarea placeholder="Kernaussagen-Text" data-bind="value: kaForm.text"></textarea></p>
								<p><textarea placeholder="Klärtext" data-bind="value: kaForm.context"></textarea></p>
								<button data-bind="click: kaForm.onSubmit">Kernaussage versenden</button>
							</div>
						</div>
					<!-- /ko -->
					<!-- ko if: type != 'cmt' && type != 'cxt' -->
						<!-- ko if: context() -->
							<a class="clickable control" data-bind="event: { click: showContext.bind($data, !showContext()) }">Klärtext an/aus</a>
						<!-- /ko -->
						<div class="select rating control">
							<input type="radio" name="rating" value="stronglike" data-bind="checked: rating(), click: clickRating($data, 'stronglike'), attr: {name: id + '-rating', id: id + '-stronglike'}"/><label data-bind="attr: {for: id + '-stronglike'}">++<span
							 class="count" data-bind="text: stronglikeSum"></span></label><input
							 type="radio" name="rating" value="like" data-bind="checked: rating(), click: clickRating($data, 'like'), attr: {name: id + '-rating', id: id + '-like'}"/><label data-bind="attr: {for: id + '-like'}">+<span
							 class="count" data-bind="text: likeSum"></span></label><input
							 type="radio" name="rating" value="neutral" data-bind="checked: rating(), click: clickRating($data, 'neutral'), attr: {name: id + '-rating', id: id + '-neutral'}"/><label data-bind="attr: {for: id + '-neutral'}">0<span
							 class="count" data-bind="text: neutralSum"></span></label><input
							 type="radio" name="rating" value="dislike" data-bind="checked: rating(), click: clickRating($data, 'dislike'), attr: {name: id + '-rating', id: id + '-dislike'}"/><label data-bind="attr: {for: id + '-dislike'}">-<span
							 class="count" data-bind="text: dislikeSum"></span></label><input
							 type="radio" name="rating" value="strongdislike" data-bind="checked: rating(), click: clickRating($data, 'strongdislike'), attr: {name: id + '-rating', id: id + '-strongdislike'}"/><label data-bind="attr: {for: id + '-strongdislike'}">--<span
							 class="count" data-bind="text: strongdislikeSum"></span></label><input
							 type="radio" name="rating" value="none" data-bind="checked: rating(), click: clickRating($data, 'none'), attr: {name: id + '-rating', id: id + '-none'}"/><label data-bind="attr: {for: id + '-none'}">?
							 </label>
						</div>
						<a class="clickable control" data-bind="event: { click: showAllComments.bind($data, !showAllComments()) }, text: 'Diskussion (' + comments().length + ')'"></a>
					<!-- /ko -->
					<!-- ko if: type == 'cmt' -->
						<div class="select rating control">
							<input type="radio" name="rating" value="like" data-bind="checked: likeRating(), click: like_onClick('like'), attr: { name: id + '-rating', id: id + '-like' }" /><label
							data-bind="attr: { for: id + '-like' }">+<span class="count" data-bind="text: likeSum() + stronglikeSum()"></span></label><input
							type="radio" name="rating" value="dislike" data-bind="checked: likeRating(), click: like_onClick('dislike'), attr: { name: id + '-rating', id: id + '-dislike' }" /><label
							data-bind="attr: { for: id + '-dislike' }">-<span class="count" data-bind="text: dislikeSum() + strongdislikeSum()"></span></label>
						</div>
					<!-- /ko -->
					<div class="comments" data-bind="if: type == 'ka' || type == 'kk'">
						<!-- ko if: showAllComments -->
							<div data-bind="foreach: comments"><!-- ko with: $parent.cmtView($data) -->
								<!-- ko template: { name: 'qkelem-template', data: $data } --><!-- /ko -->
							<!-- /ko --></div>
							<div class="cmt">
								<form data-bind="event: { submit: function() { submitComment_onClick(); return false; } }">
									<p><textarea maxlength="250" placeholder="Dein Beitrag" data-bind="value: newCommentText, attr: { disabled: disabled }"></textarea></p>
									<input type="submit" value="Beitrag abschicken" data-bind="attr: { disabled: disabled }" />
								</form>
							</div>
						<!-- /ko -->
					</div>
				<!-- /ko -->
			</div>
		</script>
		
		<script type="text/html" id="context-template">
			<div class="cxt">
				<p><span class="text" data-bind="text: $data"></span></p>
			</div>
		</script>
		
		<script type="text/javascript" src="<?php echo $generalJsPath ?>disco-0.2.1a/dev/disco.core.js"></script>
		<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
		<script src="http://test.disco-network.org/discoarguments/Scripts/knockout-3.1.0.debug.js"></script>
		<script src="http://test.disco-network.org/discoarguments/Scripts/datajs-1.1.2.js"></script>
		<script src="http://test.disco-network.org/discoarguments/Scripts/jaydata.js"></script>
		<script src="http://test.disco-network.org/discoarguments/Scripts/jaydataproviders/oDataProvider.js"></script>
		<script src="<?php echo $jsPath ?>disco.ontology.js"></script>
		<script type="text/javascript">
			var discoUri = '<?php echo $discoUri ?>', serviceUri = '<?php echo $clientPath ?>';
			var knockoutUri = 'http://test.disco-network.org/discoarguments/Scripts/knockout-3.1.0.debug';
		</script>
		<script data-main="js/index" src="<?php echo $jsPath ?>require.js"></script>
	</body>
</html>